<template>
  <div class="shareList">
    <hm-nav-bar title="我的面经分享" path="/home/find"></hm-nav-bar>
    <div class="content">
      <van-search
        shape="round"
        class="search"
        v-model="value"
        show-action
        placeholder="请输入搜索关键字"
        @search="onSearch"
        @cancel="onCancel"
      ></van-search>
      <div v-if="showList">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没数据加载"
          @load="onLoad"
          ><share
            v-for="(item, index) in list"
            :key="index"
            :info="item"
          ></share
        ></van-list>
      </div>
      <div class="history" v-else>
        <h3 class="htitle">大家都在搜</h3>
        <van-tag
          class="tag"
          color="#f7f4f5"
          text-color="#9595a5"
          v-for="(item, index) in history"
          :key="index"
          @click="tagClick(item)"
          >{{ item }}</van-tag
        >
        <van-cell center>
          <template #title>
            <h3 class="htitle">历史搜索</h3>
          </template>
          <template #default>
            <div class="clear" @click="clear">清空</div>
          </template>
        </van-cell>

        <van-tag
          color="#f7f4f5"
          text-color="#9595a5"
          class="tag"
          v-for="(item, index) in historySearch"
          :key="index"
          >{{ item }}</van-tag
        >
      </div>
    </div>
  </div>
</template>
<script>
// 这个不用导入 因为全局注册啦
// import hmNavBar from '../../../components/hmNavBar'
import share from './share'
import { articleShare, articlesShareTopSearch } from '../../../api/find'
import { getToken, setToken } from '../../../utils/token'
export default {
  data () {
    return {
      value: '',
      loading: false,
      finished: false,
      currentPage: 0, // 当前页
      pageSize: 1, // 页容量(每页显示多少条数据)
      list: [],
      showList: true,
      history: [],
      //   在data里面 是可以使用上面导入的api等等全部东西的  data是在script里面  script里面肯定可以访问
      // 上面导入的东西 不要固定认为 data里面的东西只能自定义''  [] 等等
      //   也可能存在没数据 比如第一次等等 那就是[]空数组
      //   JSON.parse()将字符串转成数组
      //   进入页面获取存储的数据 如果不存在 就为空数组[]
      historySearch: JSON.parse(getToken('historyList')) || [] // 历史搜索记录
    }
  },
  //   注册
  components: {
    // hmNavBar
    share
  },
  async created () {
    //   因为进来滚动条和底部距离小于300 会加载 因此这里无需设置
    // 一打开滚动条默认竖着通栏 和底部距离为0  小于300
    // const _q = {
    //   start: 0,
    //   limit: 5,
    //   q: this.value
    // }
    // const res = await articleShare(_q)
    // // console.log('------------qqqqqqqqqqqqqqqq')
    // // window.console.log(res)
    // this.list = res.data.data.list
  },
  methods: {
    onSearch () {
      // 还原
      this.list = []
      this.currentPage = 0
      this.loading = false
      this.finished = true
      this.$nextTick(() => {
        this.finished = false
      })
      this.showList = true
      //   1.空字符不记录到历史记录
      // 2.同样的字符不记录到历史记录 用到去重
      //   this.historySearch.length <= 4 这里不能设置 小于等于5  因为最开始 this.historySearch为空数组 空数组 长度是0也小于等于5 那么就会多一项
      //  老师的处理 限制历史 搜索五项 的方法 也可以学习一下 详情见老师代码
      //   这里还是不用&& this.historySearch.length <= 4这种方式来写把 有问题
      // 当我们搜索记录满5项的时候 后就无法改变了 无论刷新还是啥的 一直固定这五个
      // 我们需要的是只展示五项 然后输入第六项的时候第六项成为第一个搜索记录 原来五项最后一个不显示了 一次这样发生变化
      //   if (this.value.trim() !== '' && this.historySearch.length <= 4) {
      //     this.historySearch.unshift(this.value)
      //     // 数组去重
      //     this.historySearch = [...new Set(this.historySearch)]
      //     // 本地存储 本地存储只能存字符串 因此这里需要用JSON.stringify()方法将数组转成字符串
      //     setToken('historyList', JSON.stringify(this.historySearch))
      //   }
      // 老师做法
      if (this.value.trim() !== '') {
        this.historySearch.unshift(this.value)
        // 数组去重
        this.historySearch = [...new Set(this.historySearch)]
        // 搜索记录限制
        this.historySearch.splice(5)
        // 本地存储 本地存储只能存字符串 因此这里需要用JSON.stringify()方法将数组转成字符串
        setToken('historyList', JSON.stringify(this.historySearch))
      }
    },
    async onCancel () {
      this.showList = false
      // 这里加this.history.length === 0 条件是因为 说这个搜索记录 一般是很少变化的
      // 不需要每次点击取消都发送请求 这次限制发送一次请求
      if (this.history.length === 0) {
        const res = await articlesShareTopSearch()
        //   console.log('--------------------')
        //   window.console.log(res)
        this.history = res.data.data
      }
    },
    async onLoad () {
      // 1. 2   start:0   (1-1)*2
      // 2. 2   start:2  (2-1)*2
      // 3. 2   start:4   (3-1)*2
      this.currentPage++ // 调用一次增加一页
      const _q = {
        start: (this.currentPage - 1) * this.pageSize,
        limit: this.pageSize,
        q: this.value
      }
      const res = await articleShare(_q)
      // console.log('------------qqqqqqqqqqqqqqqq')
      // window.console.log(res)
      //   this.list = res.data.data.list
      //   push里面不能放数组 因此需要扩展运算符把他展开
      if (this.value.trim() !== '') {
        //   forEach能改变原数组
        res.data.data.list.forEach(item => {
          // 以this.value将title分隔成数组
          const _title = item.title.split(this.value)
          //  拼接成字符串
          item.title = _title.join(
            `<span style="color:red">${this.value}</span>`
          )
        })
      }
      this.list.push(...res.data.data.list)
      // console.log('------------------')

      // console.log(res)
      this.loading = false // 这个表示当前页加载完 不设置为false的话 他一直加载中 不会加载后面的数据了 永远只显示一条数据
      //   这里原则上是可以直接===  但是不确认到时候什么因素影响导致
      // 那就永远不满足条件了 因此设置<=稳妥 工作上也是这样
      if (res.data.data.total <= this.list.length) {
        this.finished = true
      }

      //   window.console.log(res)
    },
    tagClick (str) {
      this.value = str
      this.onSearch()
    },
    clear () {
      // 清空记录并且保存 不然刷新页面渲染的历史记录还是之前的 清空后应该没历史记录
      this.historySearch = []
      //   本地存储只能存字符串数据哦
      // 本地存储 存一样属性名的值 后面存储的会覆盖前面的
      setToken('historyList', JSON.stringify(this.historySearch))
    }
  }
}
</script>
<style lang="less" scoped>
.shareList {
  .search {
    padding-left: 0;
    padding-right: 0;
  }
  .content {
    padding: 0 @p15;
    .history {
      .htitle {
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 600;
        text-align: left;
        color: #222222;
        line-height: 25px;
        letter-spacing: 0px;
        margin-top: 30px;
      }
      .clear {
        margin-top: 30px;
      }
      .tag {
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        margin-top: 10px;
        margin-right: 10px;
        line-height: 17px;
        letter-spacing: 0px;
        padding: 8px 10px;
      }
      .van-cell {
        padding: 0;
      }
    }
  }
}
</style>
